<template>

	<div class="app-container">

		<el-form ref="form" :model="form" label-width="100px">

			<el-form-item label="院校名称">
				<el-input @input="getNameCount" v-model="form.name"></el-input>
				<span>{{nameCount}}/20 文字最多输入20字</span>
			</el-form-item>

			<el-form-item label="所属国家">
				<el-select filterable v-model="form.country_id" placeholder="请选择">

					<el-option v-for="item in countries" :key="item.value" :label="item.label" :value="item.value">
					</el-option>

				</el-select>
			</el-form-item>

			<el-form-item label="加入导航栏">
				<el-radio v-model="form.is_show_for_top" label="1">是</el-radio>
				<el-radio v-model="form.is_show_for_top" label="2">否</el-radio>
			</el-form-item>

			<el-form-item label="直招院校">
				<el-radio v-model="form.is_direct" label="1">是</el-radio>
				<el-radio v-model="form.is_direct" label="2">否</el-radio>
			</el-form-item>

			<el-form-item label="显示语言中心">
				<el-radio v-model="form.is_show_lang_center" label="1">是</el-radio>
				<el-radio v-model="form.is_show_lang_center" label="2">否</el-radio>
			</el-form-item>

			<el-form-item label="显示免考留学">
				<el-radio v-model="form.is_show_free_test" label="1">是</el-radio>
				<el-radio v-model="form.is_show_free_test" label="2">否</el-radio>
			</el-form-item>



			<el-form-item label="英文名">
				<el-input type="textarea" v-model="form.summary"></el-input>
				<!--<el-button @click="getBefore100()" type="text">获取内容前100字</el-button>-->
			</el-form-item>

			<el-form-item label="院校LOGO">
				<el-upload class="avatar-uploader" :action="host+'/guard/upload?module=school'" accept=".png,.jpg,.jpeg"
					:show-file-list="false" :on-success="handleLogoSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageLogoUrl" :src="imageLogoUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<span style="color: red">建议图片大小:40*50</span>
			</el-form-item>

			<el-form-item label="院校图片">
				<el-upload class="avatar-uploader" :action="host+'/guard/upload?module=school'" accept=".png,.jpg,.jpeg"
					:show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="imageUrl" :src="imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
				<span style="color: red">346x220，建议五行</span>
			</el-form-item>

			<el-form-item label="上架/下架">
				<el-switch :active-value="1" :inactive-value="2" v-model="form.status" active-text="上架"
					inactive-text="下架">
				</el-switch>
			</el-form-item>

			<el-form-item label="是否置顶">
				<el-switch :active-value="1" :inactive-value="2" v-model="form.is_top" active-text="是"
					inactive-text="否">
				</el-switch>
			</el-form-item>
			<el-form-item label="内容">
				<TinymceEditor  ref="tinymceRef"  v-model="form.content">
				</TinymceEditor>
			</el-form-item>

			<el-form-item label="">
				<el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
				<!-- <el-button @click="closeAddDialog" >重置</el-button> -->
			</el-form-item>

		</el-form>

	</div>
</template>
<script>
	import TinymceEditor from '@/components/tinymce'
	import {
		myGet,
		myPost
	} from '@/utils/myRequest'
	import E from 'wangeditor'
	const urlAdd = '/guard/school/add'
	const urlCountry = '/guard/school/getCountry'
	export default {
		components: {
			TinymceEditor
		},
		data() {
			return {
				host: process.env.VUE_APP_HOST,
				nameCount: 0,
				countries: [],
				imageLogoUrl: '',
				imageUrl: '',
				editor: null,
				form: {
					is_show_lang_center: "2",
					is_show_free_test: "2",
					is_direct: "2",
					is_show_for_top: "2",
					name: '',
					country_id: '',
					summary: '',
					content: '',
					logo_url: '',
					pic_url: '',
					link: '',
					status: 1,
					is_top: 1,
				},
				content:'',
			};
		},
		methods: {
			getBefore100() {
				this.form.summary = this.editor.txt.text().substring(0, 100)
			},

			getNameCount(val) {
				this.nameCount = val.length
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// this.form.content = this.editor.txt.html()
						myPost(urlAdd, this.form).then(res => {
							if (res.status) {
								this.$message.success(res.msg)
								this.$router.push('/lstSchool')
							}
						})
					}
				})
			},
			handleAvatarSuccess(res, file) {
				if (res.status) {
					this.imageUrl = res.data.records.url
					this.form.pic_url = res.data.records.filePath
				} else {
					this.$message.error('上传失败!')
				}
			},
			handleLogoSuccess(res, file) {
				if (res.status) {
					this.imageLogoUrl = res.data.records.url
					this.form.logo_url = res.data.records.filePath
				} else {
					this.$message.error('上传失败!')
				}
			},
			beforeAvatarUpload(file) {
				/* const isLt2M = file.size / 1024 / 1024 < 2;
				 if (!isLt2M) {
				   this.$message.error('上传头像图片大小不能超过 2MB!');
				 }
				 return isLt2M;*/
				return true
			},
			closeAddDialog() {
				Object.assign(this.form, this.$options.data().form)
			},
			initEditor() {
				this.editor = new E('#div1')
				this.editor.config.uploadImgServer = '/guard/article/uploadImg'
				this.editor.config.uploadVideoServer = '/guard/article/uploadVideo'
				/*let editor =  this.editor
				let form = this.form
				this.editor.config.onchange = function (newHtm) {
				  form.summary = editor.txt.text().slice(0,99)
				}*/
				this.editor.create()
			},
			
		},


		mounted() {
			// this.initEditor()

			myGet(urlCountry).then(res => {
				if (res.status) {
					this.countries = res.data.records
				}
			})

		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
